<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import {onBeforeUnmount, ref, shallowRef, onMounted, watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {ElMessage} from "element-plus";

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p></p>')
//初始值，用于做数据回显功能
const props = defineProps({
    initValue: {
        type: String,
        default: ''
    }
})
//主要用于父组件接收wangeditor实时编辑的内容
const emit = defineEmits(['getEditorContent'])

//监听父组件传递过来值的变化，用于回显
watch(() => props.initValue, value => {
    console.log(value)
    valueHtml.value = value ?? ''
})
//监听富文本编辑器内容变化，通知父组件得到数据
watch(valueHtml, (content) => {
    emit('getEditorContent', content)
})

const toolbarConfig = {}
//图片上传
import {useTokenStore} from '@/store/token.js'

const tokenStore = useTokenStore();
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            fieldName: 'file',
            server: '/api/upload',
            // 自定义增加 http  header
            headers: {
                Authorization: tokenStore.token,
            },
            // 取消文件大小限制
            maxFileSize: -1,
            // 允许的文件类型
            allowedFileTypes: ['image/*'],
            // 自定义上传
            customUpload(file, insertFn) {
                console.log('开始上传文件:', file.name, '大小:', file.size);
                
                // 取消文件大小检查
                // if (file.size > 5 * 1024 * 1024) {
                //     ElMessage.error('图片大小不能超过5MB');
                //     return;
                // }
                
                // 检查文件类型
                if (!file.type.startsWith('image/')) {
                    ElMessage.error('只能上传图片文件');
                    return;
                }
                
                const formData = new FormData();
                formData.append('file', file);
                
                fetch('/api/upload', {
                    method: 'POST',
                    headers: {
                        'Authorization': tokenStore.token
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(result => {
                    console.log('上传结果:', result);
                    if (result.code == 0) {
                        insertFn(result.data, file.name, result.data);
                        ElMessage.success('图片上传成功');
                    } else {
                        ElMessage.error('图片上传失败: ' + (result.msg || '未知错误'));
                    }
                })
                .catch(error => {
                    console.error('上传错误:', error);
                    ElMessage.error('图片上传失败，请检查网络连接');
                });
            },
            // 保留原有的customInsert作为备用
            customInsert(res, insertFn) {
                console.log('customInsert结果:', res);
                if (res.code == 0) {
                    insertFn(res.data);
                } else {
                    ElMessage.error('插入图片异常: ' + (res.msg || '未知错误'));
                }
            },
        }
    }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
</script>

<template>
    <div style="border: 1px solid #ccc">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            @onCreated="handleCreated"
        />
    </div>
</template>

<style scoped>

</style>